<template>
	<view class="container">
		<u-navbar :is-back="true" title="校园资讯" back-icon-color='#333333' height="50" :border-bottom="false">
		</u-navbar>
		<u-toast ref="uToast" />
		<view class="box">
			<view class="">
				<text>{{messageDetail.title}}</text>
				<text>{{messageDetail.create_time}}</text>
			</view>
			<view class="">
				{{messageDetail.text}}
			</view>
			<view class="icon">
				<text> {{reading}}</text>
				<text> {{messageDetail.read_count}}</text>
				<image :src="link" mode="widthFix"></image>
				<image :src="like" mode="widthFix" @click="getSchoolNewsLike"></image>
				<text> {{messageDetail.like_count}}</text>
			</view>
			<view id="leave_message">
				<view class="feed">
					<image :src="portrait" mode="widthFix" class="tupian"></image>
					<input type="text" value="" @blur="sendComment" v-model="leaveMessage" placeholder="写下你的留言" />
				</view>
			</view>
			<view class="leave">
				<text>留言</text>
			</view>
		</view>
		<view class="expression" v-for="(listItem,listIndex) in comment_list" :key="listIndex">
			<view class="list">
				<image :src="listItem.user_info?listItem.user_info.avatar_img:''" style="border-radius:50%;" mode="widthFix"></image>
				<text>{{listItem.user_info?listItem.user_info.full_name:''}}</text>
				<text>{{listItem.text}}</text>
				<text>{{listItem.comment_time}}</text>
				<image src="../../static/tupian106.png" mode="widthFix"
					@click="getSchoolNewsLikeComment(listItem.news_comment_id)">
				</image>
				<text>{{listItem.like_count}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../request.js'
	import time from '../../time.js'
	export default {
		data() {
			return {
				like: '../../static/tupian106.png',
				id: '', //传入的参数
				message_detail: {},
				startContentCount: '',
				endContentCount: '',
				comment_id: '',
				commentList: [],
				information_id: '',
				leaveMessage: '',
				text: '聚焦五大建设 深入推进“两学一做”',
				time: '2019.04.03  12:00:00',
				content: '党的十九大对国有企业改革发展提出了新的要求,这标志着国有企业的改革发展进入了新的阶段.面对新的形势,如何开展好企业',
				url: '../../static/tupian15.png',
				lastContent: '为企业的改革发展提供动力支持和思想保障,是对企业思想政治工作的的新要求.在新的形势下,企业思想政治工作,必须立足于以人为本,着眼于促进员工的全面发展,既教育人，引导人，鼓舞人，又尊重人，理解人，关心人.在新的形势下，企业思想政治工作要提高说服力，扩大说服力，扩大影响力，增强凝聚力，就要更加注重形势和内容的创新，要根据员工的实际需要，从单纯注重思想政治教育，渐渐转向既注重思想政治教育.',
				reading: '阅读量',
				amount: 3000,
				link: '../../static/tupian142.png',
				give_like: '../../static/tupian106.png',
				leave_notes: '../../static/tupian106.png',
				change_color: '../../static/tupian144.png',
				quantity: 300,
				portrait: '../../static/tupian143.png',
			}
		},
		computed: {
			messageDetail() {
				if (this.message_detail) {
					let obj = {
						picsUrl: `${uni.getStorageSync('host')}${this.message_detail.pics}`
					};
					this.message_detail = {
						...obj,
						...this.message_detail
					}
					return this.message_detail
				} else {
					return {}
				}
			},
			comment_list() {
				if (this.commentList) {
					this.commentList.forEach(item => {
						this.$set(item, 'comment_time', time.format(item.create_time));
					})
					return this.commentList;

				} else {
					return [];
				}
			}

		},
		onLoad(option) {
			if (option.id) {
				this.id = option.id;
			}
			this.getSchoolNewsDetail();
			this.getSchoolNewsLists();
		},
		methods: {
			getSchoolNewsDetail(param = 1) {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let _this = this;
				request({
					url: base_url + 'teacher/schoolNews/detail',
					method: 'post',
					data: {
						school_news_id: this.id ? this.id : 1
					},
					success(res) {
						if (res.statusCode == 200) {
							console.log(res.data.data);
							_this.message_detail = res.data.data;
							_this.information_id = res.data.data.school_news_id;
							switch (param) {
								case 1:
									_this.startContentCount = res.data.data.like_count;

									break;
								case 2:
									_this.endContentCount = res.data.data.like_count;
									break;
							}
							console.log(_this.endContentCount, _this.startContentCount);
							if (parseInt(_this.endContentCount) > parseInt(_this.startContentCount)) {
								_this.like = '../../static/tupian144.png';
							} else {
								_this.like = '../../static/tupian106.png';
							}

						} else {
							_this.$refs.uToast.show({
								title: res.data.message || '系统错误',
								type: 'warning',
							})
						}

					}
				})
			},
			getSchoolNewsLike() {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let _this = this;
				request({
					url: base_url + 'teacher/schoolNews/like',
					method: 'post',
					data: {
						school_news_id: this.information_id
					},
					success(res) {
						if (res.statusCode == 200) {
							console.log(res.data.data);
							_this.getSchoolNewsDetail(2);
						} else {
							_this.$refs.uToast.show({
								title: res.data.message || '系统错误',
								type: 'warning',
							})
						}

					}
				})
			},
			getSchoolNewsLists() {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let _this = this;
				request({
					url: base_url + 'teacher/schoolNews/commentLists',
					method: 'post',
					data: {
						school_news_id: this.id ? this.id : 1
					},
					success(res) {
						if (res.statusCode == 200) {
							console.log(res.data.data.data);
							_this.commentList = res.data.data.data;
						} else {
							_this.$refs.uToast.show({
								title: res.data.message || '系统错误',
								type: 'warning',
							})
						}

					}
				})
			},
			getSchoolNewsLikeComment(param) {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let _this = this;
				request({
					url: base_url + 'teacher/schoolNews/likeComment',
					method: 'post',
					data: {
						news_comment_id: param
					},
					success(res) {
						if (res.statusCode == 200) {
							console.log(res.data);
							_this.getSchoolNewsLists();
						} else {
							_this.$refs.uToast.show({
								title: res.data.message || '系统错误',
								type: 'warning',
							})
						}

					}
				})
			},
			sendComment() {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let _this = this;
				request({
					url: base_url + 'teacher/schoolNews/sendComment',
					method: 'post',
					data: {
						school_news_id: this.id ? this.id : 1,
						text: this.leaveMessage
					},
					success(res) {
						if (res.statusCode == 200) {
							console.log(res.data);
							_this.getSchoolNewsLists();
						} else {
							_this.$refs.uToast.show({
								title: res.data.message || '系统错误',
								type: 'warning',
							})
						}

					}
				})
			}

		}
	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		// height: 3000rpx;
		overflow: hidden;
		background: #EEEEEE;

		.box {
			width: 100%;
			background: #fff;
			margin-top: 20rpx;

			#leave_message {
				width: 100%;
				height: 102rpx;
				margin: 0rpx;
				background: #F0F0F0;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				overflow: hidden;

				.feed {
					width: 710rpx;
					height: 60rpx;
					background-color: #E5E5E5;
					margin-left: 24rpx;
					border-radius: 9rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					image {
						&:nth-child(1) {
							width: 52rpx;
							margin-left: 9rpx;
						}
					}

					input {
						&:nth-child(2) {
							height: 52rpx;
							color: #b7b7b7;
							font-size: 26rpx;
							width: 200rpx;
							border: none;
							outline: none;
							margin-left: 30rpx;

						}
					}
				}

			}

			.icon {
				width: 710rpx;
				margin-left: 20rpx;
				position: relative;
				height: 80rpx;

				text {
					&:nth-child(1) {
						position: absolute;
						color: #999999;
						font-size: 24rpx;
						bottom: 27rpx;
						left: 0rpx;
					}

					&:nth-child(2) {
						position: absolute;
						color: #999999;
						font-size: 24rpx;
						bottom: 27rpx;
						left: 88rpx;
					}

					&:nth-child(5) {
						position: absolute;
						color: #999999;
						font-size: 24rpx;
						bottom: 27rpx;
						right: 20rpx;
					}
				}

				image {
					&:nth-child(3) {
						position: absolute;
						width: 25rpx;
						right: 170rpx;
						bottom: 27rpx;
					}

					&:nth-child(4) {
						position: absolute;
						width: 30rpx;
						right: 90rpx;
						bottom: 27rpx;
					}
				}

			}

			view {
				&:nth-child(1) {
					width: 710rpx;
					margin-left: 20rpx;
					height: 127rpx;
					position: relative;

					text {
						&:nth-child(1) {
							position: absolute;
							top: 30rpx;
							left: 1rpx;
							color: #333333;
							font-size: 30rpx;
						}

						&:nth-child(2) {
							left: 1rpx;
							bottom: 0rpx;
							position: absolute;
							color: #999999;
							font-size: 18rpx;
						}
					}
				}

				&:nth-child(2) {
					width: 710rpx;
					margin-left: 20rpx;
					font-size: 24rpx;
					color: #666666;
					height: 77rpx;
					margin-top: 8rpx;

				}

				&:nth-child(4) {
					width: 710rpx;
					margin-left: 20rpx;
					font-size: 24rpx;
					color: #666666;
					height: 250rpx;
					border-bottom: 1rpx solid #F2F2F2;

				}

				&:nth-child(5) {
					width: 710rpx;
					margin-left: 20rpx;
					position: relative;
					height: 80rpx;

					text {
						&:nth-child(1) {
							position: absolute;
							color: #999999;
							font-size: 24rpx;
							bottom: 27rpx;
							left: 0rpx;
						}

						&:nth-child(2) {
							position: absolute;
							color: #999999;
							font-size: 24rpx;
							bottom: 27rpx;
							left: 88rpx;
						}

						&:nth-child(5) {
							position: absolute;
							color: #999999;
							font-size: 24rpx;
							bottom: 27rpx;
							right: 20rpx;
						}
					}

					image {
						&:nth-child(3) {
							position: absolute;
							width: 25rpx;
							right: 170rpx;
							bottom: 27rpx;
						}

						&:nth-child(4) {
							position: absolute;
							width: 30rpx;
							right: 90rpx;
							bottom: 27rpx;
						}
					}

				}

				&:nth-child(6) {
					width: 100%;
					height: 102rpx;
					background: #F0F0F0;

					overflow: hidden;

					view {
						width: 704rpx;
						height: 60rpx;
						margin-top: 22rpx;
						margin-left: 23rpx;
						background-color: #E5E5E5;
						border-radius: 5rpx;
						position: relative;

						text {
							&:nth-child(2) {
								position: absolute;
								color: #b7b7b7;
								font-size: 26rpx;
								top: 18rpx;
								left: 91rpx;
							}
						}

						.tupian {
							position: absolute;
							width: 52rpx !important;
							top: 9rpx;
							left: 9rpx;
						}
					}

				}


			}

			image {
				&:nth-child(3) {
					width: 710rpx;
					margin-left: 20rpx;
				}
			}

			.leave {
				width: 100%;
				height: 60rpx;
				position: relative;

				text {
					&:nth-child(1) {
						position: absolute;
						top: 22rpx;
						color: #333333 !important;
						font-size: 30rpx;
						left: 30rpx;
					}
				}
			}
		}

		.expression {
			width: 100%;
			// height: 201rpx;
			background: #fff;

			.list {
				width: 710rpx;
				margin-left: 20rpx;
				height: 200rpx;
				border-bottom: 1rpx solid #F2F2F2;
				background: #fff;
				position: relative;

				image {
					&:nth-child(1) {
						position: absolute;
						width: 52rpx;
						top: 29rpx;
						left: 1rpx;
					}

					&:nth-child(5) {
						position: absolute;
						bottom: 28rpx;
						right: 66rpx;
						width: 25rpx;
					}
				}

				text {
					&:nth-child(2) {
						position: absolute;
						top: 29rpx;
						left: 85rpx;
						color: #5b6a91;
						font-size: 30rpx;
					}

					&:nth-child(3) {
						position: absolute;
						top: 75rpx;
						left: 85rpx;
						color: #333333;
						font-size: 24rpx;
					}

					&:nth-child(4) {
						position: absolute;
						bottom: 25rpx;
						left: 85rpx;
						color: #999999;
						font-size: 18rpx;
					}

					&:nth-child(6) {
						position: absolute;
						color: #999999;
						font-size: 24rpx;
						bottom: 23rpx;
						right: 10rpx;
					}
				}
			}
		}



	}
</style>
